<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>报修单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css"/>
    <link href="../../css/mui.indexedlist.css" rel="stylesheet" />
    <style>
        * { touch-action: none; }
        html, body {
            height: 100%;
            overflow: hidden;
        }
        .mui-bar {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .title{
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }
        body{
            background: #ffffff;
        }
        .oa-contact-cell.mui-table .mui-table-cell {
            padding: 11px 0;
            vertical-align: middle;
        }

        .oa-contact-cell {
            position: relative;
            margin: -11px 0;
        }

        .oa-contact-avatar {
            width: 75px;
        }
        .oa-contact-avatar img {
            border-radius: 50%;
        }
        .oa-contact-content {
            width: 100%;
        }
        .oa-contact-name {
            margin-right: 20px;
        }
        .oa-contact-name, oa-contact-position {
            float: left;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        a{
            color:#ffffff;
        }
        .mui-content{
            background: #ffffff;
        }
        .content_item ul li .mui-pull-left{
            width: 60px;
            height: 60px;
            max-width: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 16px;
            color: #ffffff;
        }

        .mui-content ul li a span{
            /*padding-right: 15px;*/
            /*color:#4F77AA ;*/
        }
        .mui-search input.seach{
            width: 70%;
            padding-left: 30px;
            margin: 0;
            border-radius: 50px 50px;
            font-size:14px;
        }
        .mui-search input.seach_button{
            width:80px;
            height:40px;
            color:#ffffff;
            background: #4F77AA;
            border-radius: 5px;
        }
        .mui-search{
            padding: 15px;
        }
        .mui-search i{
            font-size: 24px;
            position: absolute;
            left: 20px;
            margin-top:10px;
        }
        .mui-select{
            width: 33.33%;
            float: left;
        }
        .mui-select select{
            background: #EFEFF4;
            border-radius: 0;
        }
        .mui-select-content{
            width:100%;
            height:41px;
            background: #EFEFF4;
        }
        .mui-content{
            width:100%;
            height:100%;
        }
        .content_item{
            width:100%;
            height:calc(100% - 111px);
        }
        .content_item .mui-control-content{
            width:100%;
            height:100%;
        }
        .color-primary{
            background: #1ab394;
        }
        .color-success {
            background: #1c84c6;
        }
        .color-info {
            background: #23c6c8;
        }
        .color-warning {
            background: #f8ac59;
        }
        .color-finish{
            background:#09AE0A;
        }
        .color-run{
            background:#F8C217;
        }
        .color-unfinish{
            background:#54B5F8;
        }
        p.mui-ellipsis-title{
            font-size: 16px;
       		/*font-weight:bold;*/
            color:#000000;
        }
    </style>
</head>

<body>
<header id="header" class="mui-bar mui-bar-nav">
    <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
    <h1 class="mui-title">报修单</h1>
    <!--<img src="../../img/sao.png" style="width: 24px;height: 24px;margin-top: 10px;"/>-->
    <i class="mui-pull-right icon iconfont icon-saoyisao"  id="openscan"  style="font-size: 24px;margin-top:10px;"></i>
</header>

<div class="mui-content">
    <div class="mui-search">
        <label><i class="icon iconfont icon-sousuo"></i></label><input class="seach" type="text" id="code_name"  placeholder="设备编码\设备名称"/>
        <input class="seach_button" type="button" onclick="search();" value="搜索">
    </div>
    <div class="mui-select-content">
        <div class="mui-select">
            <select class="mui-h5" id="dealWithStatus"  onchange="getRepairWork();" style="margin:auto; color:#000;">
                <option value="">处理状态</option>
                <option value="0">未处理</option>
                <option value="1">已处理</option>
                <option value="2">退单</option>
       
            </select>
        </div>
       <!-- <div class="mui-select">
        
            <select id="priority" class="mui-h5" style="margin:auto; color:#000;">
                <option value="">优先级</option>
                <option value="50">高</option>
                <option value="30">中</option>
                <option value="10">低</option>
            </select>
        </div>-->
        <div class="mui-select">
            <select class="mui-h5" id="repairStatus"  onchange="getRepairWork();" style="margin:auto; color:#000;">
                <option value="">工单状态</option>
                <option value="caogao">草稿</option>
                <option value="tijiao">已提交</option>
                <option value="shenhe">已审核</option>
                <option value="fenpai">已分派</option>
                <option value="jiedan">已接单</option>
                <option value="wancheng">已完成</option>
                <option value="zhuandan">已转单</option>
                <option value="tuidan">已退单</option>
                <option value="pingjia">已评价</option>
                <option value="jieshu">已结束</option>
                
            </select>
        </div>
    </div>
    <div class="content_item">
        <div id="item1" class="mui-control-content mui-active">
            <div id="scroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul id="repairWork" class="mui-table-view">
                  <!--      <li class="mui-table-view-cell mui-media">
                            <div class="mui-media-object mui-pull-left color-warning"><span style="">待审核</span></div>
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title'>高压微雾加湿器</p>
                                <p class='mui-ellipsis'>设置位置：一车间A排</p>
                                <p class='mui-ellipsis'>报修时间：2019-08-26 00:00</p>
                                <p class='mui-ellipsis'>故障描述：无法正常运转</p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                            <div class="mui-media-object mui-pull-left color-primary"><span style="display:inline-block;height: 20px;position: absolute;line-height: 40px;">列入</span><span style="display:inline-block;height: 20px;margin-top: 20px;line-height: 40px;">计划</span></div>
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title'>高压微雾加湿器</p>
                                <p class='mui-ellipsis'>设置位置：一车间A排</p>
                                <p class='mui-ellipsis'>报修时间：2019-08-26 00:00</p>
                                <p class='mui-ellipsis'>故障描述：无法正常运转</p>
                            </div>
                        </li>
                        
                        <li class="mui-table-view-cell mui-media">
                            <div class="mui-media-object mui-pull-left color-unfinish"><span style="">驳回</span></div>
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title'>高压微雾加湿器</p>
                                <p class='mui-ellipsis'>设置位置：一车间A排</p>
                                <p class='mui-ellipsis'>报修时间：2019-08-26 00:00</p>
                                <p class='mui-ellipsis'>故障描述：无法正常运转</p>
                            </div>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
<script src="../../js/jquery-1.11.3.js"></script>
<script src="../../../script/api.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
	 window.onload=function(){
	 
	 	//扫码
        var openscan=document.getElementById("openscan");
        openscan.onclick=function(){
            openScan();
        }
        
        //加载报修单
        getRepairWork();
        
    }



    mui.init();
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        var segmentedControl = document.getElementById('segmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                var styleEl = document.querySelector('input[name="style"]:checked');
                var colorEl = document.querySelector('input[name="color"]:checked');
                if (styleEl && colorEl) {
                    var style = styleEl.value;
                    var color = colorEl.value;
                    segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
                }
            }
        });
    })(mui);
   
    //打开
    function openScan(){

        var FNScanner = api.require('FNScanner');
        FNScanner.open({
            autorotation: true,
            sound:"widget://res/scan.wav"
        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
                if('success' == ret.eventType){
                    var content=ret.content;
                    if(content.indexOf("http://")==0 || content.indexOf("https://")==0 || content.indexOf("/sys")==0){
                        // window.location.href=content;
                        window.location.href="../../public/saoyisao.html?ret="+JSON.stringify(ret);
                    }else{
                        alert(content);
                    }
                }

            } else {
                alert(err.msg);
            }
        });
    }
    $(document).on("click","span.mui-pull-left",function(){
       window.location.href="../../../index.html";
    })
    
    
    //加载报修单
    function getRepairWork(){
    
    	var dealWithStatus=$("#dealWithStatus option:selected").val();//选中的值
    	var repairStatus=$("#repairStatus option:selected").val();//选中的值
    	$("#repairWork").html("");
    	//无设备的报修
		$.ajax({
			url:ctx+'/sys/patrol/App/AppRepair/getRepairWork',
			type:"post",
			data: {"dealWithStatus":dealWithStatus,"repairStatus":repairStatus},
			dataType:"json",
			success:function(datas){
				for(var i=0;i<datas.length;i++){
					var html='';
						html+='<li class="mui-table-view-cell mui-media" id="'+datas[i].ID+'" onclick="evaluated(this)">';
						if(datas[i].DealWithStatus=='0'){
							html+='<div class="mui-media-object mui-pull-left color-warning"><span style="">未处理</span></div>';
						}else if(datas[i].DealWithStatus=='1'){
							html+='<div class="mui-media-object mui-pull-left color-info"><span style="">已处理</span></div>';
						}else if(datas[i].DealWithStatus=='2'){
							html+='<div class="mui-media-object mui-pull-left color-primary"><span style="">退回</span></div>';
						}
					/*	else if(datas[i].DealWithStatus=='处理完成'){
							html+='<div class="mui-media-object mui-pull-left color-success">';
							html+='<span style="display:inline-block;height: 20px;position: absolute;line-height: 40px;">处理</span>'
							html+='<span style="display:inline-block;height: 20px;margin-top: 20px;line-height: 40px;">完成</span></div>';
						}else if(datas[i].DealWithStatus=='误报'){
							html+='<div class="mui-media-object mui-pull-left color-danger"><span style="">误报</span></div>';
						}else if(datas[i].DealWithStatus=='暂不处理'){
							html+='<div class="mui-media-object mui-pull-left color-unfinish">';
							html+='<span style="display:inline-block;height: 20px;position: absolute;line-height: 40px;">暂不</span>';
							html+='<span style="display:inline-block;height: 20px;margin-top: 20px;line-height: 40px;">处理</span></div>';
						}*/
						html+='<div class="mui-media-body">';
						html+='<p class="mui-ellipsis mui-ellipsis-title">'+datas[i].DeviceName+'</p>';
						html+='<p class="mui-ellipsis">设备位置：'+datas[i].DeviceSpace+'</p>';
						html+='<p class="mui-ellipsis">报修时间：'+datas[i].RepairTime+'</p>';
						html+='<p class="mui-ellipsis">故障描述：'+datas[i].RepairContent+'</p>';
						html+='</div>';
						html+='</li>';
						
					$("#repairWork").append(html);
				
				}
			},error:function(){
			
				mui.alert('连接不到服务器,请检查网络!!!', '', function() { });
			
			}
		
		});
    
    }
    
    //根据编码和设备名称搜索
    function search(){
    	$("#repairWork").html("");
    	var code_name=$("#code_name").val();
    	
    	$.ajax({
			url:ctx+'/sys/patrol/App/AppRepair/RepairCode_name?code_name='+code_name,
			type:"get",
			dataType:"json",
			success:function(datas){
    			for(var i=0;i<datas.length;i++){
					var html='';
						html+='<li class="mui-table-view-cell mui-media" id="'+datas[i].id+'" onclick="evaluated(this)">';
						if(datas[i].dealWithStatus=='0'){
							html+='<div class="mui-media-object mui-pull-left color-warning"><span style="">未处理</span></div>';
						}else if(datas[i].dealWithStatus=='1'){
							html+='<div class="mui-media-object mui-pull-left color-info"><span style="">已处理</span></div>';
						}else if(datas[i].dealWithStatus=='2'){
							html+='<div class="mui-media-object mui-pull-left color-primary"><span style="">退回</span></div>';
						}
//						else if(datas[i].dealWithStatus=='处理完成'){
//							html+='<div class="mui-media-object mui-pull-left color-success">';
//							html+='<span style="display:inline-block;height: 20px;position: absolute;line-height: 40px;">处理</span>'
//							html+='<span style="display:inline-block;height: 20px;margin-top: 20px;line-height: 40px;">完成</span></div>';
//						}else if(datas[i].dealWithStatus=='误报'){
//							html+='<div class="mui-media-object mui-pull-left color-danger"><span style="">误报</span></div>';
//						}else if(datas[i].dealWithStatus=='暂不处理'){
//							html+='<div class="mui-media-object mui-pull-left color-unfinish">';
//							html+='<span style="display:inline-block;height: 20px;position: absolute;line-height: 40px;">暂不</span>';
//							html+='<span style="display:inline-block;height: 20px;margin-top: 20px;line-height: 40px;">处理</span></div>';
//						}
						html+='<div class="mui-media-body">';
						html+='<p class="mui-ellipsis mui-ellipsis-title">'+datas[i].deviceName+'</p>';
						html+='<p class="mui-ellipsis">设备位置：'+datas[i].deviceSpace+'</p>';
						html+='<p class="mui-ellipsis">报修时间：'+datas[i].repairTime+'</p>';
						html+='<p class="mui-ellipsis">故障描述：'+datas[i].repairContent+'</p>';
						html+='</div>';
						html+='</li>';
						
					$("#repairWork").append(html);
				
				
    	
    			}
    	
    		}
    	
    	})
    
    
    }
    
    //点击查看详情
    function evaluated(e){
    	
    	var repairId=e.getAttribute("id");
    	window.location.href="repair_details.html?repairId="+repairId;
    
    }
    
    
    
</script>
</html>